<template>
	<div class="front_agenda_body">
		<common-filter v-model="filterParams">
			<template #button>
				<a-button @click="handleBatchApproval">批量收藏</a-button>
			</template>
			<template #form="{ data }">
				<a-form-item label="来源系统" label-col-flex="60px">
					<a-radio-group v-model="data.source">
						<a-radio value="1">
							<template #radio>不限</template>
						</a-radio>
						<a-radio value="2">
							<template #radio>数智地大(1)</template>
						</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="来源模块" label-col-flex="60px">
					<a-radio-group v-model="data.module">
						<a-radio value="1">
							<template #radio>不限</template>
						</a-radio>
						<a-radio value="2">
							<template #radio>调查管理(1)</template>
						</a-radio>
					</a-radio-group>
				</a-form-item>
			</template>
		</common-filter>
		<div class="front_agenda_table">
			<a-table :columns="columns" :data="tableData" v-bind="tableConfig" />
		</div>
	</div>
</template>

<script setup lang="ts">
import commonFilter from '../common.vue';
import { computed, reactive, ref, watch } from 'vue';
const tableConfig = reactive({
	pagePosition: 'bottom',
	style: 'height: 100%',
	virtualListProps: {
		height: '100%'
	},
	rowSelection: {
		type: 'checkbox',
		showCheckedAll: true
	},
	pagination: {
		pageSize: 20,
		showTotal: true,
		showPageSize: true,
		pageSizeOptions: [20, 40, 80],
		onChange: (page: Number, pageSize: Number) => {
			console.log('页码改变', page, pageSize);
		}
	}
});
const filterParams = ref<any>({ source: '1', module: '1' });

const columns = reactive<any>([
	{ title: 'Name', dataIndex: 'name' },
	{ title: 'Salary', dataIndex: 'salary' },
	{ title: 'Address', dataIndex: 'address' },
	{ title: 'Email', dataIndex: 'email' }
]);
const tableData = computed(() => {
	return Array.from({ length: 48 }, (_, i) => ({
		key: i + 1,
		name: 'Jane Doe',
		salary: 23000,
		address: '32 Park Road, London',
		email: 'jane.doe@example.com'
	}));
});

const handleBatchApproval = () => {
	console.log('批量审批');
	console.log(filterParams.value);
};

const handleSelectOper = (value: string) => {
	console.log(value);
};

const handleFilterData = (data: any) => {
	console.log(data);
};
</script>

<style lang="scss" scoped>
.front_agenda_table {
	flex: 1;
	overflow: hidden;
	margin-top: 16px;
	:deep(.arco-table-container) {
		height: 100%;
	}
}
</style>
